<template>
    <a-modal :width="860" :visible="state.visible" title="Basic Modal"  @cancel="handleCancel" @ok="handleOk">
        <AForm ref="formRef" :model="state.formData"  :labelCol="{style:'width:80px'}">
            <a-row>
                <a-col :span="12">
                    <AFormItem label="促销对象" name="scope">
                        <a-radio-group v-model:value="state.formData.scope" name="scope">
                            <a-radio :value="scopeEnum.WholeOrder">整单</a-radio>
                            <a-radio :value="scopeEnum.Category">品类</a-radio>
                            <a-radio disabled :value="scopeEnum.Packages" title="暂不支持">套餐</a-radio>
                            <a-radio :value="scopeEnum.Single">单品</a-radio>
                        </a-radio-group>
                    </AFormItem>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <AFormItem label="类型名称" name="title">
                        <AInput v-model:value="state.formData.title" />
                    </AFormItem>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <AFormItem label="门槛类型" name="threshold">
                        <ASelect v-model:value="state.formData.threshold">
                            <ASelectOption :value="thresholdEnum.Quantity">满数量</ASelectOption>
                            <ASelectOption :value="thresholdEnum.Amount">满金额</ASelectOption>
                        </ASelect>
                    </AFormItem>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24" >
                    <a-table bordered :data-source="state.formData.promoGears"> 
                        <a-table-column title="优惠类型" data-index="type" :width="300">
                            <template #default="{ record,index }">
                            <ASelect style="width:100%" v-model:value="record.type">
                                <ASelectOption  v-if="index==0"  :value="preferentialEnum.Subtraction">减钱</ASelectOption>
                                <ASelectOption  v-if="index==0"  :value="preferentialEnum.Discount">打折</ASelectOption>
                                <ASelectOption  v-if="index==0"  :value="preferentialEnum.Special">特价</ASelectOption>
                                <ASelectOption :value="preferentialEnum.Gift">赠品</ASelectOption>
                            </ASelect>
                            </template>
                        </a-table-column>
                        <a-table-column title="优惠对象" data-index="objType" :width="300">
                            <template #default="{ record,index }">
                            <ASelect style="width:100%" v-model:value="record.objType">
                                <ASelectOption
                                 :value="objTypeEnum.Self"
                                  v-if="[
                                    preferentialEnum.Subtraction,
                                    preferentialEnum.Discount,
                                    preferentialEnum.Special,
                                    preferentialEnum.Gift,
                                    preferentialEnum.Exchange
                                    ].includes(record.type)"
                                  >本品</ASelectOption>
                                <ASelectOption :value="objTypeEnum.Gift" v-if="record.type===preferentialEnum.Gift">赠自定义品</ASelectOption>
                                <ASelectOption :value="objTypeEnum.Coupon"  v-if="record.type===preferentialEnum.Gift">赠优惠券</ASelectOption>
                                <ASelectOption :value="objTypeEnum.CustomGoods" v-if="record.type===preferentialEnum.Exchange">自定义商品</ASelectOption>
                            </ASelect>
                            </template>
                        </a-table-column>
                        <a-table-column title="操作" data-index="action">
                            <template #default="{ record,index }">
                            <a-button type="text" @click="delGear(index)">删除</a-button>
                            <a-button v-if="index===state.formData.promoGears!.length-1" type="text" stye="margin-left:8px" @click="addGear()">增加</a-button>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-col>
            </a-row>
        </AForm>
    </a-modal>
    </template>
    <script lang="ts" setup>
    import {ResponseVo, PromoTypes} from "../../../type";
    import { reactive,ref,onMounted } from "vue";
    import { PromoService } from "@/service";
    import { message } from "ant-design-vue";
    import { preferentialEnum, thresholdEnum,objTypeEnum,dataTypeEnum, scopeEnum } from "@/type/enum";
    
    const columnsRef = ref();
    
    const props = withDefaults(defineProps<{
        currentPromo?:Partial<PromoTypes.IPromoItem>;
    }>(),{
        currentPromo:():Partial<PromoTypes.IPromoItem>=>({
            promoGears:[{}]
        })
    })
    
    const formRef = ref()
    const emit = defineEmits<{
        (e:"ok"):void,
        (e:"cancel"):void
    }>()
    
    const state = reactive<{
        formData:Partial<PromoTypes.IPromoItem>;
        visible: boolean,
        dataSource: Partial<PromoTypes.IPromoItem>[]
    }>({
        formData:{
            promoGears:[]
        },
        visible: true,
        dataSource: [{}]
    })
    
    onMounted(()=>{
        state.formData = {...props.currentPromo};
        if(state.formData.promoGears===undefined || state.formData.promoGears.length===0){
            state.formData.promoGears = [];
            state.formData.promoGears?.push({dataType: dataTypeEnum.Main})
        }
    })
    
    const handleOk = ()=>{
        formRef.value.validateFields().then(async(valid:boolean)=>{
            if(valid){
                let res:ResponseVo<any>
                if(state.formData.id){
                    res = await PromoService.editPromo(state.formData as PromoTypes.IPromoItem); 
                }else{
                    res = await PromoService.addPromo(state.formData as PromoTypes.IPromoItem);
                }  
                if(res.code===0){
                    message.success("操作成功！")
                    emit("ok");
                }
            }
        })
    }
    
    const handleCancel = ()=>{
        emit("cancel")
    }

    const addGear = ()=>{
        if(state.formData.promoGears===undefined)return;
        if(state.formData.promoGears?.length>4){
            return message.error("优惠类容最多叠加四层")
        }
        state.formData.promoGears?.push({dataType:dataTypeEnum.Minor});
    }

    const delGear = (index:number)=>{
        if(state.formData.promoGears===undefined)return;
        if(state.formData.promoGears.length===1){
            return message.error("至少需要填写一条促销内容")
        }
        state.formData.promoGears?.splice(index,1)
    }
    </script>